<template>
	<div id="container" class="center">
		<p>所属线路: <select name="line" v-model="psPoleInfo.id">
				<option value="" selected>--请选择--</option>
				<option v-for="line in lines" :value="line.id" :key="line.id">{{line.linename}}</option>
			</select>
			是否启用:
			<select name="status" id="status" v-model="psPoleInfo.isstart">
				<option value="-1">--请选择--</option>
				<option value="1">启用</option>
				<option value="0">停用</option>
			</select>
			&nbsp;
			<input type="button" @click="queryLike()" value="查询">
			&nbsp;
			<input type="button" @click="openModal(0,null)" value="添加杆塔">
		</p>

		<!-- 数据展示 -->
		<div>
			<el-table :data="tableData.list" style="width: 100%" :row-class-name="tableRowClassName">
				<el-table-column prop="polecode" label="杆塔编号" width="180" align="center">
				</el-table-column>
				<el-table-column prop="linename" label="所属路线" width="180" align="center">
					<template slot-scope="scope">
						{{scope.row.linename === null ? '无':scope.row.linename}}
					</template>
				</el-table-column>
				<el-table-column prop="isstart" label="状态(启用|停用)" align="center">
					<template slot-scope="scope">
						{{scope.row.isstart === 1 ? '启用':'停用'}}
					</template>
				</el-table-column>
				<el-table-column label="操作" prop="isstart" align="center">
					<template slot-scope="scope">
						<el-button size="mini" @click="openModal(1,scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页标签 -->
		<div style="margin: 0.5rem;">
			<el-pagination :background="true" :page-size="tableData.pageSize" :pager-count="11"
				layout="prev, pager, next" :total="tableData.total" @current-change="handlerCurrentChange">
			</el-pagination>
		</div>

		<!-- 模态框 -->
		<div v-if="showModal" class="modal">
			<div class="modal-content">
				<div class="modal-head">
					<span class="close" @click="closeModal">&times;</span>
					<p>{{modalTitle}}</p>
				</div>
				<div class="modal-body">
					<div>
						<el-input placeholder="请输入杆塔编号" prefix-icon="el-icon-check" v-model="psPoleInfo.polecode">
						</el-input>
					</div>
					<div
						style="display: flex;align-items: center;justify-content: space-between;padding: 5px 8rem 5px 0;">
						<p>启用状态:</p>
						<el-radio v-model="radio" label="1">启用</el-radio>
						<el-radio v-model="radio" label="0">停用</el-radio>
					</div>
					<div>
						<el-button type="primary" size="mini">
							<i :class="{'el-icon-loading': isLoading}"></i>
							<span @click="save">保存</span>
						</el-button>
						<el-button type="info" size="mini" @click="closeModal">返回</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		queryAllPsPoleInfo,
		getNewLineName,
		delPoleById,
		addPoleInfo,
		updatePoleInfo
	} from '../../config/request.js'
	export default {
		methods: {
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			},
			// 加载所有杆塔数据
			loadAllPoleInfo(obj) {
				queryAllPsPoleInfo(obj).then(res => {
					this.tableData = res.data.pageInfo;
				}).catch(err => {
					this.$notify.error({
						title: '网络无响应',
						message: err,
						duration: 2000
					})
				})
			},
			handlerCurrentChange(pageNum) {
				this.psPoleInfo.pageNum = pageNum;
				this.loadAllPoleInfo(this.psPoleInfo);
			},
			queryLike() {
				this.loadAllPoleInfo(this.psPoleInfo);
			},
			getNewLine() {
				getNewLineName().then(res => {
					this.lines = res.data.psPoleInfos;
				}).catch(err => {
					this.$notify.error({
						title: '网络无响应',
						message: '网络请求异常!',
						duration: 2000
					})
				})
			},
			openModal(type, obj) {
				if (type == 0) {
					this.modalTitle = '添加';
					this.psPoleInfo.polecode = '';
					this.radio = '0';
				} else if (type == 1) {
					this.modalTitle = '编辑';
					this.psPoleInfo.polecode = obj.polecode;
					this.radio = JSON.stringify(obj.isstart);
					this.psPoleInfo.id = obj.id;
				}
				this.showModal = true;
			},
			closeModal() {
				this.psPoleInfo.polecode = "";
				this.psPoleInfo.isstart = -1;
				this.showModal = false;
			},
			handleDelete(obj) {
				if (confirm("确定要删除吗？")) {
					delPoleById(obj).then(res => {
						this.psPoleInfo.polecode = "";
						this.psPoleInfo.isstart = -1;
						this.$message.error('删除成功!');
						this.loadAllPoleInfo(this.psPoleInfo);
						this.getNewLine();
					})
				}
			},
			save() {
				//非空判断
				if (this.psPoleInfo.polecode == '') {
					this.$notify.error({
						title: '值为空',
						message: '杆塔编号不能为空!',
						duration: 1500
					})
					return;
				}
				//判断是修改还是添加
				if (this.modalTitle == '添加') {
					this.psPoleInfo.isstart = this.radio;
					this.isLoading = true;
					addPoleInfo(this.psPoleInfo).then(res => {
						if (res.code == 200) {
							this.psPoleInfo.polecode = '';
							this.psPoleInfo.isstart = -1;
							setTimeout(() => {
								this.isLoading = false;
								this.$message.success('添加成功');
								this.loadAllPoleInfo(this.psPoleInfo);
								this.getNewLine();
							}, 1500)
						}
					}).catch(err => {
						console.log(err);
						this.$notify.error({
							title: '网络无响应',
							message: '网络请求异常!',
							duration: 0
						})
					})
					return;
				}
				if (this.modalTitle == '编辑') {
					this.psPoleInfo.isstart = this.radio;
					updatePoleInfo(this.psPoleInfo).then(res=>{
						if(res.code == 200){
							this.psPoleInfo.polecode = '';
							this.psPoleInfo.isstart = -1;
							this.loadAllPoleInfo(this.psPoleInfo);
							this.getNewLine();
							this.$message.success('保存成功');
						}
					})
					return;
				}
			}
		},
		data() {
			return {
				tableData: [],
				lines: [],
				psPoleInfo: {
					id: '',
					polecode: '',
					lineid: '',
					linecode: '',
					linename: '',
					creationtime: '',
					createdby: '',
					lastupdatetime: '',
					isstart: -1,
					pageNum: ''
				},
				showModal: false,
				modalTitle: '编辑',
				radio: '1',
				isLoading: false
			}
		},
		mounted() {
			//调用加载所有杆塔数据函数
			this.loadAllPoleInfo(this.psPoleInfo);
			//调用获取新；路线集合
			this.getNewLine();
		}
	}
</script>

<style>
	#container {
		background-color: #F2F6FC;
		border-radius: 5px;
		width: 80%;
		margin: 0 auto;
		/* 水平居中 */
		padding: 20px;
		/* 添加内边距 */
		box-sizing: border-box;
		/* 让内边距和边框计入元素宽度 */
	}

	.center {
		text-align: center;
		/* 内容居中对齐 */
	}

	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}

	/* 设置 <select> 元素的样式 */
	select {
		padding: 6px 10px;
		border-radius: 4px;
		border: 1px solid #ccc;
	}

	/* 设置 <input> 元素的样式 */
	input[type="submit"],
	input[type="button"] {
		padding: 6px 10px;
		border-radius: 4px;
		border: none;
		background-color: #4CAF50;
		color: white;
		cursor: pointer;
	}

	/* 设置 <p> 元素的样式 */
	p {
		margin: 0;
		padding: 10px;
		border-radius: 4px;
		display: inline-block;
	}

	/* 模态框样式 */
	.modal {
		display: block;
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgba(0, 0, 0, 0.5);
		/* 遮罩层颜色和透明度 */
	}

	.modal-content {
		background-color: #fefefe;
		margin: 15% auto;
		padding: 20px;
		border: 1px solid #888;
		width: 30%;
	}

	.close {
		color: #aaa;
		font-size: 28px;
	}

	.close:hover,
	.close:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}

	.modal-head {
		display: flex;
		border-bottom: 1px solid #aaa;
		align-items: center;
		flex-direction: row-reverse;
		justify-content: space-between;
		margin: 0.2rem;
	}

	.modal-body {
		height: 10rem;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
</style>